<template>
    <div>
        <!--    查询功能-->
        <div class="center">
            <div class="profile">
                <el-input class="queryInp" v-model="queryData.name" @keyup.enter.native="select"
                    placeholder="请输入社团名称搜索"></el-input>
                <el-input class="queryInp" v-model="queryData.place" @keyup.enter.native="select"
                    placeholder="请输入社团地点搜索"></el-input>
                <el-input class="queryInp" v-model="queryData.description" @keyup.enter.native="select"
                    placeholder="请输入社团简介搜索"></el-input>
                <el-button type="primary" style="margin-left: 5px; height: 31.5px" icon="el-icon-search"
                    @click="select">查询</el-button>
            </div>
            <!-- 新增按钮 -->
            <el-button @click="add" style="height: 32px;margin-left: 5px; position: absolute;right: 212px;"
                type="success">新增</el-button>
        </div>

        <el-table :data="formData" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
            <el-table-column v-for="(e, i) in rowData" :key="i" :label="e.label" :width="e.width">
                <div slot-scope="scope" v-if="e.prop != 'logo'">
                    <span>{{ scope.row[e.prop] }}</span>
                </div>
                <div slot-scope="scope" v-else>
                    <img style="width: 80%" :src="scope.row.logo" class="avatar" />
                </div>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="update(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                        title="确定删除此学习资料吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页  -->
        <pagination style="text-align: right;" v-show="total > 0" :pageSizes="[5, 10, 20, 30]" :total="total"
            :page.sync="queryData.pageNum" :limit.sync="queryData.pageSize" @pagination="getList" />

        <el-dialog title="社团信息" :visible.sync="centerDialogVisible" width="30%" center :before-close="handleClose">
            <el-form ref="form" :rules="rules" :model="addForm" label-width="80px">
                <el-form-item label="图片" prop="id">
                    <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" name="file"
                        :data="uploadData" :headers="headers">
                        <img style="width: 100%" v-if="addForm.logo" :src="addForm.logo" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="社团名称" prop="name">
                    <el-col :span="20">
                        <el-input v-model="addForm.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="社团地点" prop="place">
                    <el-col :span="20">
                        <el-input v-model="addForm.place"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="社团简介" prop="place">
                    <el-col :span="20">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
                            v-model="addForm.description">
                        </el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { select, add, update, del } from "@/api/organizations/index.js"
export default {
    name: "organizationsManagement",
    data() {
        return {
            queryData: {
                name: "",
                place: "",
                description: "",
                pageNum: 1,
                pageSize: 5
            },
            formData: [],
            rowData: [
                {
                    prop: "id",
                    label: "id",
                    width: "200"
                },
                {
                    prop: "logo",
                    label: "logo",
                    width: "200"
                },
                {
                    prop: "name",
                    label: "社团名称",
                    width: "200"
                },
                {
                    prop: "place",
                    label: "社团地点",
                    width: "200"
                },
                {
                    prop: "description",
                    label: "社团简介",
                    // width: "200"
                },
            ],
            total: 0,
            centerDialogVisible: false,
            addForm: {
                logo: "",
                name: "",
                place: "",
                description: "",
            },
            headers: "",
            actionUrl: "http://106.52.100.34:8222/minioservice/minio-upload/upload",
            uploadData: {
                bucketName: 'student' // 上传头像时的附加参数
            },
            rules: {
                name: [
                    { required: true, message: "社团名称不能为空", trigger: ['blur', 'change'] }
                ],
            }
        }
    },
    mounted() {
        this.select()
        this.setHeaders()
    },
    watch: {
        centerDialogVisible: {
            immediate: true,
            handler(newValue) {
                if (!newValue) {
                    this.addForm = {
                        logo: "",
                        name: "",
                        place: "",
                        description: "",
                    }
                }
            },
            deep: true
        },
    },
    methods: {
        select() {
            return new Promise((resolve) => {
                select(this.queryData).then(res => {
                    const { JoinClubsByPage } = res
                    this.total = JoinClubsByPage.total
                    this.formData = JoinClubsByPage.records
                    resolve()
                })
            })
        },
        add() {
            this.centerDialogVisible = true;
        },
        update(e) {
            this.centerDialogVisible = true;
            this.addForm = { ...e }
        },
        del(id) {
            del(id).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.select();
                } else {
                    this.$message({
                        message: "删除失败",
                        type: "error",
                    });
                }
            })
        },
        getList(e) {
            this.queryData.pageNum = e.page
            this.queryData.pageSize = e.limit
            this.select()
        },
        save() {
            if (this.addForm.id) {
                update(this.addForm).then((res) => {
                    if (res.code === 20000) {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.centerDialogVisible = false;
                        this.select();
                    } else {
                        this.$message({
                            message: "修改失败",
                            type: "error",
                        });

                    }
                });
            } else {
                add(this.addForm).then((res) => {
                    if (res.code === 20000) {
                        this.$message({
                            message: "增加成功",
                            type: "success",
                        });
                        this.centerDialogVisible = false;
                        this.select();
                    } else {
                        this.$message({
                            message: "增加失败",
                            type: "error",
                        });
                        console.log(res);

                    }
                });
            }
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(() => {
                    done();
                })
                .catch(() => { });
        },
        handleAvatarSuccess(res) {
            if (res.success) {
                this.addForm.logo = res.data.url
            } else {
                this.$message.error('上传失败');
            }
        },
        //判断上传的是否为jpg、png格式
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";

            if (!isJPG && !isPNG) {
                this.$message.error("上传头像图片只能是 JPG 格式 或者是 PNG 格式!");
            }
        },
        // 从 cookie 中获取 token
        getTokenFromCookie() {
            const cookies = document.cookie.split('; ');
            const token = cookies.find(row => row.startsWith('token='))?.split('=')[1];
            return token;
        },
        // 设置 headers
        setHeaders() {
            this.headers = {
                'token': this.getTokenFromCookie()
            };
        },
    }
}
</script>

<style scoped>
.center {
    position: relative;
    display: flex;
    justify-content: flex-start;
}

.profile {
    margin-left: 2px;
    margin-bottom: 5px;
    display: flex;
    width: 100%;
    background-color: #fff;
    color: #505050;
    font-size: 18px;
}

.xxzlselect {
    position: relative;
    right: 550px;
}

.avatar-uploader .avatar {
    width: 300px;
    height: 100px;
    display: block;
}

.avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

a {
    text-decoration: none;
    /* 移除下划线 */
    color: white;
    /* 设置颜色为黑色 */
}

.upload-btn:hover {
    border: 1px dashed #409eff;
}

.queryInp {
    width: 200px;
    margin-right: 5px;
}

.queryInp:nth-child(3) {
    margin: 0;
}
</style>